<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>个人信息及密码修改</title>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/personCenter/personInfo.css">
    <script src="__PUBLIC__/Home/js/personCenter/jquery-2.1.3.min.js" charset="utf-8"></script>
    <style media="screen">
      span{
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <div id="myinfo">
        <p style="margin-top: 20px;height:28px;">
          <span class="myinformation">我的个人信息</span>
          <span class="infoinput">请填写以下信息*为必填项</span>
        </p>
        <form class="" action="{:U('personCenter/changeInfo')}" method="post">
          <input type="hidden" name="user_id" value="{$list.user_id}">
          <label class="mylaber">*电子邮件地址</label>
          <div class="myinput">
            <input type="text" name="email" class="myform" placeholder="*电子邮件" value="{$list.email}" id="email">
            <span id="emailtips" style="color:red"></span>
          </div>
          <label class="mylaber">*用户名</label>
          <div class="myinput">
            <input type="text" name="username" class="myform" placeholder="*用户名" value="{$ulist.username}" id="username" readonly>
            <span id="usernametips" style="color:red"></span>
          </div>
          <label class="mylaber">*真实姓名</label>
          <div class="myinput">
            <input type="text" name="real_name" class="myform" placeholder="*真实姓名" value="{$list.real_name}" id="real_name">
            <span id="real_nametips" style="color:red"></span>
          </div>
          <label class="mylaber">*手机</label>
          <div class="myinput">
            <input type="text" name="tel" class="myform" placeholder="*手机" value="{$list.tel}" id="tel">
            <span id="teltips" style="color:red"></span>
          </div>
          <label class="mylaber">*性别</label>
          <div class="myinput">
            <if condition="$list['sex'] eq 0">
            <input type="radio" class="mysex" name="sex" checked value="0">
            <span class="choosesex">女</span>
            <input type="radio" class="mysex" name="sex" value="1">
            <span class="choosesex">男</span>
            <else />
            <input type="radio" class="mysex" name="sex" value="0">
            <span class="choosesex">女</span>
            <input type="radio" class="mysex" name="sex" checked  value="1">
            <span class="choosesex">男</span >
            </if>
          </div>
          <label class="mylaber">*出生日期</label>
          <div style="height:40px;">
              <!-- 出生年选择 -->
              <div class="myage">
                <select class="agedetail sel_year" name="year" rel="{$list.year}">
                </select>
              </div>
              <div class="myage">
                <select class="agedetail sel_month" name="month" style="padding-left:15px"  rel="{$list.month}">
                </select>
              </div>
              <div class="myage">
                <select class="agedetail sel_day"  name="day" style="padding-left:15px" rel="{$list.day}">
                </select>
              </div>
              <!-- 清除浮动 -->
              <div style="clear:both"></div>
              <label class="mylaber">*验证码</label>
              <div class="myinput">
                <input type="text" name="mycode" class="myform" placeholder="*验证码" style="width:100px;float:left;display:block" id="mycode">
                <span style="display:block;float:left;width:100px;height:40px;margin-left:10px">
                    <img src="{:U('personCenter/myverify')}" alt=""  height="40" id="vdimgck"/>
                </span>
                <a style="display:block;float:left;height:40px;font-size:13px;cursor:pointer" onclick="changecode()" href="javascript:;">看不清？换一张</a>
                <span id="mycodetips" style="color:red"></span>
              </div>
              <hr style="margin:30px 0;opacity:0.7">
              <div style="height:24px;width:100%;margin-bottom:30px;" id="password">
                  <p style="width:24px;border:1px solid #ccc;height:24px;float:left" sign="no"></p>
                  <span style="display:block;float:left;height:24px;font-size:13px;line-height:24px;margin-left:15px;">修改密码</span>
              </div>
              <!-- 密码修改弹框  start -->
               <div style="width:690px;height:261px;display:none" id="myfold">
                  <p style="height:28px;">
                    <span class="myinformation">修改密码</span>
                  </p>
                  <label class="mylaber">*当前密码</label>
                  <div class="myinput">
                    <input type="password" name="password" class="myform" placeholder="*当前密码" id="password">
                    <span id="passwordtips" style="color:red"></span>
                  </div>
                  <label class="mylaber">*新的密码</label>
                  <div class="myinput">
                    <input type="password" name="Newpassword" class="myform" placeholder="*新的密码" id="Newpassword">
                  </div>
                  <label class="mylaber">*确认新密码</label>
                  <div class="myinput">
                    <input type="password" name="Repassword" class="myform" placeholder="*确认新密码" id="Repassword">
                    <span id="Repassword" style="color:red"></span>
                  </div>
              </div>
              <!-- 密码修改弹框  start -->
              <div style="height:46px;margin-top:10px;float:left" class="myinput">
                  <input type="submit" id="submit" value="确定" style="width:160px;height:46px;background:#025f8e;color:white;border:none;cursor:pointer">
              </div>
          </div>
          <div style="clear:both"></div>
        </form>
    </div>

  </body>
  <!-- 密码修改栏的折叠特效 -->
  <script type="text/javascript">
    $('document').ready(function(){
      $('#password p').click(function(){
          $('#myfold').slideToggle("fast").siblings("#myfold:visible").slideUp("fast");
          top.document.getElementById('show').innerHTML = 1000;
          top.back();
          if($(this).attr('sign')=="yes"){
            $(this).css('background','#FFF');
            $(this).attr('sign','no');
          }else {
            $(this).css('background','#025f8e');
            $(this).attr('sign','yes');
          }
      });
    });
  </script>
  <!-- 动态获取生日选择器js -->
  <script type="text/javascript" src="__PUBLIC__/Home/js/personCenter/birthday.js"></script>
  <script>
  // 验证码动态刷新
  function changecode(){
    var url = "{:U('personCenter/myverify')}";
    console.log(url);
    $('#vdimgck').attr('src',url);
  }
  // 出生年月的js
  $(function () {
  	$.ms_DatePicker({
        YearSelector: ".sel_year",
        MonthSelector: ".sel_month",
        DaySelector: ".sel_day"
      });
  	$.ms_DatePicker();
  });
  // 用分针自动获取其子窗口的高
  window.onload = function(){
    var mywidth=document.body.scrollHeight;
    // console.log(mywidth);
    top.document.getElementById('show').innerHTML = mywidth;
    top.back();
  };
  // js页面验证提交的信息
  $(function(){
    var k1 = false;
    var k3 = false;
    var k4 = false;
    var k5 = false;

    $('#submit').on('click',function(){
      //1.验证邮箱
      var reg5= /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      if(!reg5.test($("#email").val())){
          $("#emailtips").html("邮箱格式错误");
      }else{
          $("#emailtips").html("");
          k1 = true;
      }

      /*3 .手机号验证*/
      var reg2= /^1[35689]\d{9}$/;
          if(!reg2.test(parseInt($("#tel").val()))){
              $("#teltips").html("请输入11位手机号码");
          }else{
              $("#teltips").html("");
              k3 = true;
              // alert(3);
          }

      /*4 .真实姓名验证*/
      var reg3= /^[\u4e00-\u9fa5]{2,12}$/;
          if(!reg3.test($("#real_name").val())){
              $("#real_nametips").html("请输入2-12个中文");
          }else{
              $("#real_nametips").html("");
              k4 = true;
              // alert(4);
          }

      // 5.验证验证码
      var reg4=/^\d{3}$/;
          if(!reg4.test($("#mycode").val())){
              $("#mycodetips").html("验证码输入错误");
          }else{
              $("#mycodetips").html("");
              k5 = true;
              // alert(5);
          }

      if(k1 == true && k3 == true && k4 == true && k5 == true){
        // alert(123);
      }else{
        return false;
      }

    });
  });
  </script>
</html>
